<template>
  <el-card>
    <el-table v-loading="loading" border :data="skuList">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      />
      <el-table-column label="名称" prop="skuName" />
      <el-table-column label="描述" prop="skuDesc" />
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img
            :src="row.skuDefaultImg"
            :alt="row.skuName"
            style="width: 100px; heigth: 100px"
          >
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight" />
      <el-table-column label="价格(元)" prop="price" />
      <el-table-column label="操作" width="280px">
        <template v-slot="{row}">
          <el-tooltip v-if="row.isSale===0" content="上架" placement="top">
            <el-button type="success" icon="el-icon-top" size="mini" @click="skuOnSale(row.id)" />
          </el-tooltip>
          <el-tooltip v-else content="下架" placement="top">
            <el-button type="danger" icon="el-icon-bottom" size="mini" @click="skuCancelSale(row.id)" />
          </el-tooltip>
          <el-tooltip content="更新SKU" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="editSkuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="查看详情" placement="top">
            <el-button
              type="info"
              icon="el-icon-info"
              size="mini"
              @click="getOneSkuInfo(row.id)"
            />
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的要删除此项Sku吗？" @onConfirm="deleteSku(row,$index)">
            <el-tooltip slot="reference" content="删除Sku" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页的内容 -->
    <el-pagination
      style="text-align: center"
      :current-page="page"
      :pager-count="7"
      :page-sizes="[3, 5, 8, 10, 15]"
      :page-size="limit"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 抽屉 -->
    <el-drawer
      size="45%"
      title="查看SKU信息"
      :visible.sync="drawer"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col
          :span="6"
        ><div class="grid-content bg-purple">名称</div></el-col>
        <el-col
          :span="18"
        ><div class="grid-content bg-purple">
          {{ skuInfo.skuName }}
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="6"
        ><div class="grid-content bg-purple">描述</div></el-col>
        <el-col
          :span="18"
        ><div class="grid-content bg-purple">
          {{ skuInfo.skuDesc }}
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="6"
        ><div class="grid-content bg-purple">价格</div></el-col>
        <el-col
          :span="18"
        ><div class="grid-content bg-purple">{{ skuInfo.price }}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="6"
        ><div class="grid-content bg-purple">平台属性</div></el-col>
        <el-col
          :span="18"
        ><div class="grid-content bg-purple">
          <el-tag
            v-for="skuAttrValue in skuInfo.skuAttrValueList"
            :key="skuAttrValue.id"
            type="success"
          >{{ skuAttrValue.valueName }}</el-tag>
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col
          :span="6"
        ><div class="grid-content bg-purple">图片列表</div></el-col>
        <el-col
          :span="13"
          :offset="2"
        ><el-carousel height="300px">
          <el-carousel-item
            v-for="skuImage in skuInfo.skuImageList"
            :key="skuImage.id"
          >
            <img
              :src="skuImage.imgUrl"
              :alt="skuImage.imgName"
              style="width: 400px"
            >
          </el-carousel-item> </el-carousel></el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script>
import { reqGetAllSkuList, reqSkuOnSale, reqSkuCancelSale, reqDeleteSku, reqGetOneSkuInfo } from '@/api/product/sku'
export default {
  name: 'Sku',
  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      loading: false,
      drawer: false,
      skuList: [],
      skuInfo: {} // sku对象
    }
  },
  mounted() {
    this.getAllSkuList()
  },
  methods: {
    // 获取一条skuInfo信息
    async getOneSkuInfo(id) {
      this.drawer = true
      const result = await reqGetOneSkuInfo(id)
      if (result.code === 200) {
        this.skuInfo = result.data
      } else {
        this.$message.error('获取SKU信息失败...')
      }
    },
    // 删除sku
    async deleteSku(row) {
      const result = await reqDeleteSku(row.id)
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getAllSkuList()
      } else {
        this.$message({
          type: 'success',
          message: '删除失败'
        })
      }
    },
    // 上架
    async skuOnSale(id) {
      const result = await reqSkuOnSale(id)
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '上架成功'
        })
        this.getAllSkuList()
      } else {
        this.$message({
          type: 'error',
          message: '上架失败'
        })
      }
    },
    // 下架
    async skuCancelSale(id) {
      const result = await reqSkuCancelSale(id)
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '下架成功'
        })
        this.getAllSkuList()
      } else {
        this.$message({
          type: 'error',
          message: '下架失败'
        })
      }
    },
    async getAllSkuList() {
      const { page, limit } = this
      this.loading = true
      const result = await reqGetAllSkuList({ page, limit })
      if (result.code === 200) {
        this.skuList = result.data.records
        this.total = result.data.total
        this.loading = false
      } else {
        this.$message({
          type: 'error',
          message: '获取sku数据失败...'
        })
      }
    },
    handleSizeChange(val) {
      this.limit = val
      this.getAllSkuList()
    },
    // 分页相关 当页码发生了变化时触发的函数
    handleCurrentChange(val) {
      this.page = val
      this.getAllSkuList()
    }
  }
}
</script>

<style></style>
